<script setup lang="ts">

</script>

<template>
  <el-card class="course-card" shadow="hover">
    <template #default>
      <img class="course-cover" src="/vite.svg" alt="cover">
    </template>
    <template #footer>
      <div class="course-content">
        <div class="course-title">课程名称</div>
        <div class="course-teacher">主讲教师: {{`愣头崽`}}</div>
      </div>
    </template>
  </el-card>
</template>

<style scoped lang="scss">
.course-card {
  width: 290px;
  height: 230px;

  cursor: pointer;

  .course-cover {
    height: 100px;
    width: 100%;
  }

  .course-content {
    height: 54px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .course-title {
      text-align: start;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .course-teacher {
      width: 100%;
      text-align: end;
      font-size: 14px;
    }
  }


}
</style>